<ion-header>
    <ion-toolbar content-page>
        <ion-buttons start>
            <button ion-button icon-only (click)="backClickHandle($event)">
                <i class="toolbar-back"></i>
            </button>
        </ion-buttons>
        <ion-title>
            {{pageTitle}}
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only adpmenutoggle>
                <i class="toolbar-menu"></i>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-refresher (ionRefresh)="doRefresh($event)" [pullMax]="800">
        <ion-refresher-content></ion-refresher-content>
    </ion-refresher>
    <div>
        <div>
            <ion-list class="item-list">
                <div class="total-note" [class.device-pixel-border-bottom]="!requestStatus||(requestStatus&&!clientNoteListModels.length)" (click)="goToNoteFilter()">
                    <span class="left-panel" *ngIf="requestStatus">共{{clientNoteListModels.length}}条</span>
                    <div class="filter-btn">
                        <i class="filter"></i>筛选
                    </div>
                </div>
                <div *ngIf="requestStatus&&clientNoteListModels.length==0" class="no-data">
                    <div class="no-data-img"><img src="./assets/images/common/icon_nodata.png"></div>
                    <div class="no-data-txt">没有相关数据</div>
                </div>
                <div class="note-item" *ngFor="let item of clientNoteListModels index as index" (click)="editNote(item)">
                    <p class="year-sign" *ngIf="allNoteYearQueue[item.id]">{{allNoteYearQueue[item.id]}}</p>
                    <div class="left" [class.device-pixel-border-bottom]="(clientNoteListModels.length-1)==(index)||allNoteYearQueue[clientNoteListModels[index+1].id]">
                        <div class="table">
                            <div class="cell" *ngIf="allNoteDateIdList[item.id]">
                                <div class="date">
                                    {{item.createdTime*1000| date:'dd'}}
                                </div>
                                <div class="time">
                                    {{item.createdTime*1000 | date:'M'}} 月
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right device-pixel-border-bottom" [class.gray-right]="item.noteType==4">
                        <ion-item-sliding #slidingItem>
                            <ion-item [class.download]="downloadTimerLength>=2&&currentVoiceId==item.id">
                                <span class="default" [class.active]="(item.noteType==1||item.noteType==2||item.noteType==3)&&item.sourceType!=2">{{getNoteType(item)}}</span>
                                <p class="content" [class.active]="item.noteType!=4&&item.sourceType!=2">
                                    <span class="word-panel" *ngIf="item.contentType!=2">{{item.content}}</span>
                                    <span *ngIf="item.contentType==2" class="voiceNote"
                                          (click)="playOrStop($event,item.voiceUrl,item.id,item.voiceLength)">
                                    <img src="./assets/images/client/client-note/icon_notes_voice.png" alt=""
                                         *ngIf="voiceId!=item.id" [class.clear]="downloadTimerLength>=2&&currentVoiceId==item.id" class="normal">
                                    <img src="./assets/images/client/client-note/icon_notes_voice_paly.gif" alt="" *ngIf="voiceId==item.id" class="normal">
                                        <img src="./assets/images/client/client-note/icon_loadingvoice.png" alt="" class="loading">
                                    <i>{{item.voiceLength}}</i>
                                </span>
                                </p>
                                <p class="time">{{item.createdTime*1000 | date:'HH:mm'}}</p>
                            </ion-item>
                            <ion-item-options side="right" *ngIf="item.noteType!=4">
                                <button ion-button (click)="delete($event,item,index,slidingItem,'all')">
                                    <i></i>
                                </button>
                            </ion-item-options>
                        </ion-item-sliding>
                    </div>
                    <div class="clear-both"></div>
                </div>
            </ion-list>
        </div>
    </div>
    <ion-fab bottom center class="client-note-btn-panel">
        <button ion-fab class="btn-box">
            <button class="btn-map btn-component" ion-button  (click)="addNewProgress()">
                <i></i>
                <span>文字跟进情况</span>
            </button>
            <button class="btn-call btn-component" ion-button (click)="voiceNoteGoAddPage()">
                <i></i>
                <span>语音跟进情况</span>
            </button>
        </button>
    </ion-fab>
</ion-content>
<!--录音组件-->
<!--<adp-media-audio (audioSuccess)="recordSuccess($event)" (addNewProgress)="addNewProgress()" [audioStatus]="audioStatus" [audioBtn]="audioBtn" [page]="page"></adp-media-audio>-->
